Enum을 넘어서: TypeScript Const Assertion vs. Union Type

TypeScript와 함께하는 정적 타입 JavaScript의 세계에서, enums는 오랫동안 고정된 명명된 상수를 나타내는 데 사용되어 왔습니다. Enums는 관련된 값들의 컬렉션을 정의하는 명확하고 읽기 쉬운 방법을 제공합니다. 그러나 프로젝트가 성장하고 발전함에 따라 개발자들은 종종 더 유연하고 때로는 더 성능이 뛰어난 대안을 찾습니다. 자주 등장하는 두 가지 강력한 대안은 const assertion과 union type입니다. 이 게시물은 전통적인 enum의 대안을 사용하는 미묘한 차이를 파고들어, 실용적인 예시를 제공하고 언제 어떤 것을 선택해야 하는지에 대한 지침을 제시합니다.

전통적인 TypeScript Enum 이해하기

대안을 탐색하기 전에, 표준 TypeScript enum이 어떻게 작동하는지 확실히 이해하는 것이 중요합니다. Enums를 사용하면 명명된 숫자 또는 문자열 상수를 정의할 수 있습니다. 기본적으로 숫자형이거나 문자열 기반일 수 있습니다.

숫자 Enum

기본적으로 enum 멤버는 0부터 시작하는 숫자 값이 할당됩니다.

            enum DirectionNumeric {
  Up,
  Down,
  Left,
  Right
}

let myDirection: DirectionNumeric = DirectionNumeric.Up;
console.log(myDirection); // Output: 0

            

              
                Copy
              
            
          

명시적으로 숫자 값을 할당할 수도 있습니다.

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  InternalError = 500
}

let responseStatus: StatusCode = StatusCode.Success;
console.log(responseStatus); // Output: 200

            

              
                Copy
              
            
          

문자열 Enum

문자열 enum은 컴파일된 JavaScript에서 멤버 이름이 유지되므로 향상된 디버깅 경험을 위해 종종 선호됩니다.

            enum ColorString {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: ColorString = ColorString.Blue;
console.log(favoriteColor); // Output: "BLUE"

            

              
                Copy
              
            
          

Enum의 오버헤드

Enum은 편리하지만 약간의 오버헤드가 있습니다. TypeScript enum은 JavaScript로 컴파일될 때 종종 역매핑(예: 숫자 값을 enum 이름으로 다시 매핑)을 포함하는 객체로 변환됩니다. 이것은 유용할 수 있지만 번들 크기에 기여하며 항상 필요한 것은 아닐 수 있습니다.

다음 간단한 문자열 enum을 고려해 보세요:

            enum Status {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Completed = "COMPLETED"
}

            

              
                Copy
              
            
          

JavaScript에서 이것은 다음과 같이 될 수 있습니다:

            var Status;
(function (Status) {
    Status["Pending"] = "PENDING";
    Status["Processing"] = "PROCESSING";
    Status["Completed"] = "COMPLETED";
})(Status || (Status = {}));

            

              
                Copy
              
            
          

단순하고 읽기 전용인 상수 세트의 경우, 이 생성된 코드는 다소 과하다고 느껴질 수 있습니다.

대안 1: Const Assertion

Const assertion은 값에 대해 가능한 가장 구체적인 타입을 추론하도록 컴파일러에 지시하는 강력한 TypeScript 기능입니다. 고정된 값 세트를 나타내는 배열 또는 객체와 함께 사용될 때, enum의 경량 대안으로 작용할 수 있습니다.

배열과 함께하는 Const Assertion

문자열 리터럴 배열을 생성한 다음 const assertion을 사용하여 해당 타입을 불변으로 만들고 요소들을 리터럴 타입으로 만들 수 있습니다.

            const statusArray = ["PENDING", "PROCESSING", "COMPLETED"] as const;

type StatusType = typeof statusArray[number];

let currentStatus: StatusType = "PROCESSING";
// currentStatus = "FAILED"; // Error: Type '"FAILED"' is not assignable to type 'StatusType'.

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus("COMPLETED");

            

              
                Copy
              
            
          

여기서 무슨 일이 일어나고 있는지 살펴봅시다:

• as const: 이 assertion은 TypeScript에게 배열을 읽기 전용으로 취급하고 그 요소들에 대해 가장 구체적인 리터럴 타입을 추론하도록 지시합니다. 따라서 `string[]` 대신 타입은 `readonly ["PENDING", "PROCESSING", "COMPLETED"]`가 됩니다.
• typeof statusArray[number]: 이것은 매핑된 타입입니다. `statusArray`의 모든 인덱스를 반복하고 해당 리터럴 타입을 추출합니다. `number` 인덱스 시그니처는 본질적으로 "이 배열의 모든 요소의 타입을 알려줘"라고 말합니다. 결과는 union type: "PENDING" | "PROCESSING" | "COMPLETED"입니다.

이 접근 방식은 문자열 enum과 유사한 타입 안정성을 제공하지만 최소한의 JavaScript를 생성합니다. `statusArray` 자체는 JavaScript에서 문자열 배열로 유지됩니다.

객체와 함께하는 Const Assertion

Const assertion은 객체에 적용될 때 훨씬 더 강력합니다. 키가 명명된 상수를 나타내고 값이 리터럴 문자열 또는 숫자인 객체를 정의할 수 있습니다.

            const userRoles = {
  Admin: "ADMIN",
  Editor: "EDITOR",
  Viewer: "VIEWER"
} as const;

type UserRole = typeof userRoles[keyof typeof userRoles];

let currentUserRole: UserRole = "EDITOR";
// currentUserRole = "GUEST"; // Error: Type '"GUEST"' is not assignable to type 'UserRole'.

function displayRole(role: UserRole) {
  console.log(`User role is: ${role}`);
}

displayRole(userRoles.Admin); // Valid
displayRole("EDITOR"); // Valid

            

              
                Copy
              
            
          

이 객체 예시에서:

• as const: 이 assertion은 전체 객체를 읽기 전용으로 만듭니다. 더 중요한 것은 모든 속성 값에 대해 리터럴 타입을 추론하고 (예: `string` 대신 `"ADMIN"`) 속성 자체를 읽기 전용으로 만든다는 것입니다.
• keyof typeof userRoles: 이 표현식은 `userRoles` 객체의 키들의 union, 즉 "Admin" | "Editor" | "Viewer"를 반환합니다.
• typeof userRoles[keyof typeof userRoles]: 이것은 룩업 타입입니다. 키들의 union을 취하고 이를 사용하여 `userRoles` 타입에서 해당 값을 찾습니다. 그 결과는 값들의 union: "ADMIN" | "EDITOR" | "VIEWER"이며, 이는 역할에 대해 우리가 원하는 타입입니다.

userRoles에 대한 JavaScript 출력은 일반 JavaScript 객체가 됩니다:

            var userRoles = {
    Admin: "ADMIN",
    Editor: "EDITOR",
    Viewer: "VIEWER"
};

            

              
                Copy
              
            
          

이것은 일반적인 enum보다 훨씬 가볍습니다.

Const Assertion을 언제 사용해야 할까?

• 읽기 전용 상수: 런타임에 변경되지 않아야 하는 고정된 문자열 또는 숫자 리터럴 세트가 필요할 때.
• 최소한의 JavaScript 출력: 번들 크기에 관심이 있고 상수에 대해 가장 성능이 좋은 런타임 표현을 원할 때.
• 객체와 유사한 구조: 데이터 또는 구성을 구성하는 방식과 유사하게 키-값 쌍의 가독성을 선호할 때.
• 문자열 기반 세트: 설명적인 문자열로 가장 잘 식별되는 상태, 타입 또는 카테고리를 나타내는 데 특히 유용합니다.

대안 2: Union Type

Union type은 변수가 여러 타입 중 하나의 값을 가질 수 있다고 선언할 수 있게 합니다. 리터럴 타입(문자열, 숫자, 불리언 리터럴)과 결합될 때, 세트 자체에 대한 명시적인 상수 선언 없이 허용되는 값들의 세트를 정의하는 강력한 방법을 형성합니다.

문자열 리터럴과 함께하는 Union Type

문자열 리터럴의 union을 직접 정의할 수 있습니다.

            type TrafficLightColor = "RED" | "YELLOW" | "GREEN";

let currentLight: TrafficLightColor = "YELLOW";
// currentLight = "BLUE"; // Error: Type '"BLUE"' is not assignable to type 'TrafficLightColor'.

function changeLight(color: TrafficLightColor) {
  console.log(`Changing light to: ${color}`);
}

changeLight("RED");
// changeLight("REDDY"); // Error

            

              
                Copy
              
            
          

이것은 허용되는 문자열 값의 세트를 정의하는 가장 직접적이고 종종 가장 간결한 방법입니다.

숫자 리터럴과 함께하는 Union Type

마찬가지로 숫자 리터럴을 사용할 수 있습니다.

            type HttpStatusCode = 200 | 400 | 404 | 500;

let responseCode: HttpStatusCode = 404;
// responseCode = 201; // Error: Type '201' is not assignable to type 'HttpStatusCode'.

function handleResponse(code: HttpStatusCode) {
  if (code === 200) {
    console.log("Success!");
  } else {
    console.log(`Error code: ${code}`);
  }
}

handleResponse(500);

            

              
                Copy
              
            
          

Union Type을 언제 사용해야 할까?

• 단순하고 직접적인 세트: 허용되는 값의 세트가 작고 명확하며, 값 자체를 넘어선 설명적인 키가 필요하지 않을 때.
• 암시적 상수: 세트 자체에 대한 명명된 상수를 참조할 필요가 없고, 대신 리터럴 값을 직접 사용할 때.
• 최대 간결성: 전용 객체 또는 배열을 정의하는 것이 과하다고 느껴지는 간단한 시나리오에.
• 함수 매개변수/반환 타입: 함수에 대한 허용 가능한 문자열 또는 숫자 입력/출력의 정확한 세트를 정의하는 데 탁월합니다.

Enum, Const Assertion, Union Type 비교

주요 차이점과 사용 사례를 요약해 봅시다:

런타임 동작

• Enums: JavaScript 객체를 생성하며, 역매핑을 포함할 수 있습니다.
• Const Assertion (배열/객체): 일반 JavaScript 배열 또는 객체를 생성합니다. 타입 정보는 런타임에 지워지지만, 데이터 구조는 유지됩니다.
• Union Type (리터럴 포함): Union 자체에 대한 런타임 표현이 없습니다. 값은 단순히 리터럴입니다. 타입 검사는 컴파일 타임에만 발생합니다.

가독성과 표현력

• Enums: 특히 설명적인 이름과 함께 높은 가독성을 제공합니다. 더 장황할 수 있습니다.
• Const Assertion (객체): 구성 또는 설정 방식을 모방하는 키-값 쌍을 통해 좋은 가독성을 제공합니다.
• Const Assertion (배열): 명명된 상수를 나타내는 데 가독성이 떨어지며, 주로 정렬된 값 목록에 사용됩니다.
• Union Type: 매우 간결합니다. 가독성은 리터럴 값 자체의 명확성에 달려 있습니다.

타입 안전성

• 세 가지 접근 방식 모두 강력한 타입 안전성을 제공합니다. 변수에 할당되거나 함수에 전달될 수 있는 값이 유효하고 미리 정의된 값으로만 제한되도록 보장합니다.

번들 크기

• Enums: 생성된 JavaScript 객체로 인해 일반적으로 가장 큽니다.
• Const Assertions: 일반 데이터 구조를 생성하므로 enum보다 작습니다.
• Union Types: 타입 자체에 대한 특정 런타임 데이터 구조를 생성하지 않고 리터럴 값에만 의존하므로 가장 작습니다.

사용 사례 매트릭스

간단한 가이드입니다:

실용적인 예시와 모범 사례

예시 1: API 상태 코드 표현하기

Enum:

            enum ApiStatus {
  Success = "SUCCESS",
  Error = "ERROR",
  Pending = "PENDING"
}

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Const Assertion (객체):

            
const apiStatusCodes = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  PENDING: "PENDING"
} as const;

type ApiStatus = typeof apiStatusCodes[keyof typeof apiStatusCodes];

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Union Type:

            
type ApiStatus = "SUCCESS" | "ERROR" | "PENDING";

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

권장 사항: 이 시나리오에서는 union type이 종종 가장 간결하고 효율적입니다. 리터럴 값 자체가 충분히 설명적입니다. 각 상태에 추가 메타데이터(예: 사용자 친화적인 메시지)를 연결해야 하는 경우, const assertion 객체가 더 나은 선택일 것입니다.

예시 2: 사용자 역할 정의하기

Enum:

            
enum UserRoleEnum {
  Admin = "ADMIN",
  Moderator = "MODERATOR",
  User = "USER"
}

function getUserPermissions(role: UserRoleEnum) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Const Assertion (객체):

            
const userRolesObject = {
  Admin: "ADMIN",
  Moderator: "MODERATOR",
  User: "USER"
} as const;

type UserRole = typeof userRolesObject[keyof typeof userRolesObject];

function getUserPermissions(role: UserRole) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Union Type:

            
type UserRole = "ADMIN" | "MODERATOR" | "USER";

function getUserPermissions(role: UserRole) {
  // ... logic ...
}

            

              
                Copy
              
            
          

권장 사항: const assertion 객체가 여기서 좋은 균형을 이룹니다. 명확한 키-값 쌍(예: userRolesObject.Admin)을 제공하여 역할을 참조할 때 가독성을 향상시키면서도 성능이 뛰어납니다. 직접적인 문자열 리터럴로 충분하다면 union type도 매우 강력한 대안입니다.

예시 3: 구성 옵션 표현하기

전역 애플리케이션의 다양한 테마를 가질 수 있는 구성 객체를 상상해 보세요.

Enum:

            
enum Theme {
  Light = "light",
  Dark = "dark",
  System = "system"
}

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

Const Assertion (객체):

            
const themes = {
  Light: "light",
  Dark: "dark",
  System: "system"
} as const;

type Theme = typeof themes[keyof typeof themes];

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

Union Type:

            
type Theme = "light" | "dark" | "system";

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

권장 사항: 테마와 같은 구성 설정의 경우 const assertion 객체가 종종 이상적입니다. 사용 가능한 옵션과 해당 문자열 값을 명확하게 정의합니다. 키(Light, Dark, System)는 설명적이며 값에 직접 매핑되어 구성 코드를 매우 이해하기 쉽게 만듭니다.

올바른 도구 선택하기

TypeScript enum, const assertion, union type 사이의 결정은 항상 명확하지는 않습니다. 이는 종종 런타임 성능, 번들 크기, 코드 가독성/표현력 사이의 절충안으로 귀결됩니다.

• 간단하고 제한된 문자열 또는 숫자 리터럴 세트가 필요하고 최대 간결성이 요구될 때 Union Type을 선택하세요. 함수 시그니처 및 기본 값 제한에 탁월합니다.
• enum과 유사하게 명명된 상수를 정의하는 데 더 구조적이고 읽기 쉬운 방법을 원하지만 런타임 오버헤드가 훨씬 적을 때 Const Assertion (객체와 함께)을 선택하세요. 이는 구성, 역할 또는 키가 중요한 의미를 추가하는 모든 세트에 적합합니다.
• 단순히 불변의 정렬된 값 목록이 필요하고 명명된 키보다 인덱스를 통한 직접 액세스가 더 중요할 때 Const Assertion (배열과 함께)을 선택하세요.
• 역매핑과 같은 특정 기능이 필요하거나 (현대 개발에서는 덜 흔하지만) 팀에 강력한 선호도가 있고 프로젝트에 대한 성능 영향이 무시할 수 있는 경우 TypeScript Enum을 고려하세요.

많은 최신 TypeScript 프로젝트에서는 특히 문자열 기반 상수에 대해 더 나은 성능 특성과 종종 더 간단한 JavaScript 출력으로 인해 전통적인 enum보다 const assertion과 union type을 선호하는 경향이 있습니다.

전역적 고려 사항

전 세계 사용자들을 위한 애플리케이션을 개발할 때 일관되고 예측 가능한 상수 정의가 중요합니다. 우리가 논의한 선택 사항(enum, const assertion, union type)은 모두 서로 다른 환경과 개발자 로케일에서 타입 안전성을 강제함으로써 이러한 일관성에 기여합니다.

• 일관성: 선택한 방법에 관계없이 프로젝트 내에서 일관성을 유지하는 것이 중요합니다. 역할에 const assertion 객체를 사용하기로 결정했다면, 코드베이스 전체에서 해당 패턴을 고수하세요.
• 국제화 (i18n): 국제화될 레이블이나 메시지를 정의할 때, 유효한 키 또는 식별자만 사용되도록 이러한 타입 안전 구조를 사용하세요. 실제 번역된 문자열은 i18n 라이브러리를 통해 별도로 관리됩니다. 예를 들어, "PENDING", "PROCESSING", "COMPLETED"가 될 수 있는 `status` 필드가 있다면, i18n 라이브러리는 이러한 내부 식별자를 지역화된 표시 텍스트에 매핑할 것입니다.
• 시간대 및 통화: enum과 직접적으로 관련이 없지만, 날짜, 시간 또는 통화와 같은 값을 다룰 때 TypeScript의 타입 시스템은 올바른 사용을 강제하는 데 도움이 되지만, 정확한 전역 처리를 위해서는 일반적으로 외부 라이브러리가 필요합니다. 예를 들어, `Currency` union type은 "USD" | "EUR" | "GBP"로 정의될 수 있지만, 실제 변환 로직에는 전문화된 도구가 필요합니다.

결론

TypeScript는 상수를 관리하기 위한 풍부한 도구 세트를 제공합니다. enum이 우리에게 잘 봉사해 왔지만, const assertion과 union type은 종종 더 성능이 좋은 매력적인 대안을 제공합니다. 성능, 가독성 또는 간결성과 같은 특정 요구 사항에 따라 이들의 차이점을 이해하고 올바른 접근 방식을 선택함으로써, 전 세계적으로 확장 가능한 더 견고하고 유지보수 가능하며 효율적인 TypeScript 코드를 작성할 수 있습니다.

이러한 대안을 수용하면 번들 크기가 줄어들고, 애플리케이션 속도가 빨라지며, 국제 팀에 대한 더 예측 가능한 개발자 경험을 제공할 수 있습니다.